<!--suppress ALL -->

<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import { login } from '@/api/user';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
import router from "@/router";
const rules = {
  id: [
    { required: true, message: '请输入工号', trigger: 'blur' },
    { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' }
  ]
}
const form = ref(null)
const userForm = ref({
  id: '',
  password: ''
})
const userstore = useUserStore()
const ln = async () => {
  await form.value.validateField()
  const res = await login(userForm.value)
  userstore.setToken(res.data.data.token)
  userstore.setUser(res.data.data.user)
  ElMessage.success("登录成功！")
  router.push('/home')
}
//
</script>

<template>
  <!-- 注册页面的整体盒子 -->
  <div class="reg-container"
    ><div class="background"
    ><span style="display: block;padding-top: 100px">
           捷报办公系统
         </span>
    </div>
    <h2>
      <el-card class="box-card logs">
        <div class="cont">

        <div class="text item">
          <el-form ref="form" :model="userForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item id="ids" label="" prop="id" style="margin-bottom: 20px;">
              <el-input class="rus" placeholder="请输入用户名" v-model="userForm.id"></el-input>
            </el-form-item>
            <el-form-item  prop="password" >
              <el-input id="password" placeholder="请输入密码" v-model="userForm.password" show-password class="rus" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button  type="primary"
                          @click="ln()"
                          class="tologin">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        </div>
      </el-card>
    </h2>
  </div>

</template>

<style lang="less" scoped>
    .el-input{
        padding:10px 5px;
    }
    .min{
        color: rgb(175, 175, 175);
        font-size:15px;
    }
    .min:hover{
        color: rgb(198, 198, 198);
        cursor: pointer;
    }
    .reg-container{
      width: 100vw;
    }
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      overflow-x: hidden;
    }
    .background{
      background-image: url("@/assets/background.jpg");
      width: 100%;
      background-size: initial;
      background-position: 70% 50%;
      height: 100vh;
      font: 800 12rem '';
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      text-align: center;
    }
    .background::before{
      content: '';
      background-size: cover;
      background-image: inherit;
      background-position: 50% 50%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -90;
    }
    h1{
      position: relative;
      text-align: center;
      top: -100px;
      width: 100%;
      letter-spacing: 10px;
      color: #fff;
    }
    .logs{
      position: absolute;
      letter-spacing: 2px;
      height: 100%;
      bottom: 0;
      width: 100%;
      left: 50%;
      border: none;
      transform: translateX(-50%);
      background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.8));
    }
    ::v-deep .el-input__inner{
      background: none;
      border: none;
      color: rgba(250,250,235,1);
    }
    .el-input__inner::placeholder {
      color: gray;
    }
    .el-input__inner:-ms-input-placeholder {
      color: gray;
    }

    .el-input__inner::-ms-input-placeholder {
      color: gray;
    }
    ::v-deep .el-input__wrapper{
      box-shadow: none;
      border: none;
      padding: 10px 20px;
      border-radius: 50px;
      margin: 0 50px;
      background: rgba(200,200,200,0.3);
    }
    ::v-deep .el-form-item__error{
      margin-left: 80px;
    }
    ::v-deep .el-form-item__content{
      margin: 0 !important;
    }
    .tologin{
      border: none;
      border-radius: 50px;
      width: 140px;
      padding: 25px;
      background: rgba(0,0,0,0.6);
      margin: 0 40%;
    }
    .cont{
      width: 50%;
      position: absolute;
      bottom: 0;
      margin:45% 25% 11%;
    }
</style>